<template>
	<div 
		ref="hcj_menuBox"
		class="hcj-menuBox" :class="{
		'hcj-menuBox-v': mode == 'vertical' ? true : false,
		'hcj-menuBox-h': mode == 'horizontal' ? true : false
	}">
		<div :class="{
			'hcj-layout-h': mode == 'horizontal' ? true : false,
		}" ref="hcj_layout">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'hcj-menu',
		props: {
			mode: {
				type: String,
				default: 'vertical'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			textColor: {
				type: String,
				default: '#747578'
			},
			mouseColor: {
				type: String,
				default: '#ecf5ff'
			}
		},
		components: {
		},
		data() {
			return {
				childMode: this.mode, //传递给子组件模式 this.$parent.childMode
				submenuItem: false, //是否可以有子菜单
				setBgColor: this.bgColor ,//导航栏自定义背景颜色
				setTextColor: this.textColor,
				setMouseColor: this.mouseColor
			}
		},
		mounted() {
			this.setHorizontalStyle();
		},
		methods: {
			setHorizontalStyle() {
				if(this.mode == 'horizontal') {
					this.$refs.hcj_menuBox.style.backgroundColor = this.bgColor;
				}
			}
		}

	}
</script>

<style scoped>
	.hcj-menuBox {
		display: inline-block;
		/* width: auto; */
		height: 45px;
		z-index: 9999;
		background-color: transparent;
	}
	.hcj-menuBox-v {
		display: inline-block;
		height: auto;
		/* background-color: transparent; */
		border-right: 1px solid #dadada;
	}
	.hcj-menuBox-h {
		display: inline-block;
		/* background-color: #fff; */
		border-bottom: 1px solid #dadada;
	}
	.hcj-layout {
		display: block;
	}
	.hcj-layout-h {
		display: flex;
	}
</style>